import { Component } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  React 调用时 this 指向问题:
    1. 原生JS知识点回顾：sayHi() {} 书写时不能绑定 this 指向，由调用时决定。
    2. 箭头函数，在书写时就绑定 this 的指向。
*/
class App extends Component {
  state = {
    msg: 'hello react',
  };

  // 普通函数：调用时绑定 this
  handleClick() {
    console.log(this);
  }

  // render是生命周期钩子函数，this 指向是组件实例
  render() {
    console.log('render', this);
    return (
      <div>
        {/* render 中通过箭头函数调用绑定 */}
        <button onClick={() => this.handleClick()}>点我1</button>
        {/* render 中通过 bind 绑定 this 指向 */}
        <button onClick={this.handleClick.bind(this)}>点我2</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
